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(57) Abstract: A distributed software program allows for creating and providing presentation packages of real properties. It com- 
prises a mechanism for uploading pictures to the servers (1 12), a sketching program (102) that is stored in servers but can be started 
from client computers, a mechanism to convert sketching results to presentation and deploy them to appropriate locations, and a 
mechanism to transmit the presentation packages upon viewer's requests. The sketching program (102) allows homeowners from 
various locations to draw diagrams such as floor plans (26), to associate areas in diagrams to pictures and other information of the 
areas, to compose and save the results back to servers (112) which in turn convert and deploy them. The presentation packages 
include layout, animation, and navigation code that enable viewers to use graphics-enable network browsers to display a picture box 
(200), a diagram box (204), and a height bar in a typical setting. 
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1 Online Presentation System for Home Pictures and Structures 

2 

3 CROSS-REFERENCE TO RELATED APPLICATION 

4 This application claims the benefit of U.S. Provisional Application No. 60/203,353, filed 10 

5 May 2000 by the present inventors, for Online Presentation System for House Pictures and Structures. 

6 This application is also related to U.S. Provisional Application Ser. No. 60/190,675, filed 20 March 

7 2000, for Online Cake Design System, by the present inventors, and for which a nonprovisional U.S. 

8 Patent Application Ser. No. 09/812,310, was filed on 20 March 2001, and which is herein 

9 incorporated by reference to the extent relevant. 
10 

11 FIELD OF THE INVENTION 

12 The present invention relates to the Real Estate Business and Electronic-Commerce involving 

13 realty using computer driven networks. Specifically, the present invention is related to a system that 

14 allows homeowners, agents such as realtors, or other users, to present online the houses' for sale, in the 

15 form of structural diagrams such as floor plans, photo pictures for individual parts of the houses, and 

16 associations between them so that potential buyers can view the homes online and navigate the photo 

17 . pictures using the structural diagrams as guides. With this system, the whole procedure, including 

18 uploading pictures, drawing diagrams, associating pictures and diagram areas, publishing and viewing 

19 the results, can be done online from each user's location. 
20 

21 BACKGROUND: DESCRIPTION OF PRIOR ART 

22 The viewing and showing of houses that are on the market are among the major, and more 

23 . time-consuming, activities of the real estate market, This can be an expensive and time-consuming 

24 procedure for both the home buyer as well as the home seller, and often results in dissatisfaction of 

25 either the buyer, the seller, or both parties. 

26 In recent years the appearance of the Internet has greatly helped to improve the situation 

27 because people can list, search and view houses online, enabling potential buyers to screen potential 

28 homes to visit, and reducing time spent to travel to homes that might not be of interest. For sellers, 

29 this provides an opportunity to expose the property to more buyers, thus may potentially help to 

30 achieve a more fair market value. There are numerous real estate websites and other networks (such as 

31 the Multilist Service) that store large and up-to-date collections of data on houses on the market. 

32 Through the use of the Internet or other communications networks, these listings are made available 

33 to real estate organizations, professionals, and potential buyers. The ability to access various real 

34 estate sites or networks may vary, because some sources may have restricted access policies. A 

35 common problem with most advertisements of residential real estate is that only a frontal picture of 

36 the house is presented on these sites by either the realty agents or the home owner. Some sites show 

37 . more than one picture for some properties, usually in unorganized lists, which take lot of screen space 

38 and do not give viewer enough relation information among the pictures. 

39 A recent improvement over this single-picture view has been made through a technology 

40 called "Virtual Tour". With this technology, one can get, online, a 360-degree animated rotating view 
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1 of a scene, such as the outside environment of a house, one or more individual rooms of a house, an 

2 entire apartment or the like. This view is sometimes entertaining in addition to being more complete 

3 than a single picture. 

4 This technology however has the following drawbacks: 

5 * (a) Although such a tour may be entertaining at the beginning, it is not efficient when a user 

6 wants to view a number of house. These tours do not really provide more information 

7 then two to four separate pictures taken from different angles, and the transmission of 

8 f such tours over a communications network can be slow because of the size of the image 

9 files being transmitted. 

10 (b) The continuous viewing of rotating pictures can and may make many people 

1 1 uncomfortable. If the viewer wants to view the opposite side of the room from the view 

12 first presented, he or she has to turn the image 180 degrees. This rotation can be time 
■ 13 consuming when done slowly, and some users may become dizzy if the rotation is 

14 performed quickly. 

15 (c) It requires a trained expert to make a trip to the house to take the 360-degree pictures. If 

16 the seller wants to revise the images at a later date, this revision requires an additional trip 

17 for each such revision, which can result in delays, as well as additional costs. 

18 (d) It does not tell much about the structure (layout) of the house, such as the relative 

19 locations and sizes of individual rooms. 

20 Tornetta (U.S. Pat. No. 5,032,989) discloses a real estate search and location system and 

21 method, which provides information about the properties in textual form. The user enters a 

22 geographic area of interest into the system, and as the user narrows the area, symbols representing 

23 homes for sale and that are listed in the database are indicated to the user. 

24 Hughes (U.S. Pat. No. 5,736,977) discloses a video real estate information service, which can 

25 provide a virtual tour of the home using digitized video, and can include a textual description of the 

26 property and its surrounding areas. 

27 In U.S. Pat. No. 5,754,850 Janssen discloses a real-estate method and apparatus for searching 

28 for homes in a search pool, in which the user enters a plurality of search criteria, the system evaluates 

29 the criteria according to a ranking system, and displays a specified number of items from within the 

30 search pool that match the user's criteria. 

31 In U.S. Pat. No. 5,867,155 Williams discloses a large scale distributive video on demand 

32 system for the distribution of real estate properties information. Video information, such as a video 

33 tour, of the home for sale is- entered into a computer database, and digitized audio sound tracks can be 

34 included with the video information about the home. 

35 The drawbacks of these video based system are, (a) video consumes more network bandwidth 

36 than individual pictures, (b) video does not give as detailed layout information as maps and floorplans, 

37 and (c) while good for auto playing, video is not good for free navigation. 

38 There are a number of commercially available, off-line, Computer Aided Design ("CAD") 

39 programs on the market for creating and editing diagrams of houses. One such general purpose CAD 

40 program is AUTOCAD (Trademark of Autodesk Inc.), which can be used for numerous drawing 
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1 functions, and other programs directed specifically for real estate. These programs often require a 

2 significant amount of computer resources, and many are stand-alone programs that often lack 

3 communication capabilities. Many programs are complicated and expensive for ordinary homeowners 

4 or realty agents to use, and thus they are not suitable for use as an online sketching tool for home- 

5 selling purposes. 

6 There are also a number of online design, painting or sketching programs used for other 

7 purposes, such as designing a garden, cakes, artwork and the like.. A drawback of many of these 

8 systems is that they are not tailored for use for sketching house structures (layouts, floor plans), 

9 mapping pictures, and converting them to presentable webpages. The present inventors have 

10 described an easy to use system for the online design of cakes in a related United States Patent 

11 Application, (Serial No. 09/812,310, filed 20 March 2001) and in this specification we apply that 

12 technology for use with the online display of real estate, which may lead to sales of that real estate. 

13 ' Although the present invention describes the use of the system for displaying of residential 

" 14 real estate, it is to be understood that the present invention can be applied to other forms of real estate 

15 as well, such as industrial and commercial realty, it may be used to help rental as well as sale. 
16 

17 BRIEF SUMMARY OF THE INVENTION. 

18 In accordance with the present invention, an online presentation system for home pictures and 

19 structures comprises one or more network sites, a mechanism for uploading pictures to these sites, a 

20 drawing / sketching program for a user with knowledge of the house structure to sketch structural 

21 diagrams (such as floor plans) for a number of cross-sections of the home, a mapping function of the 

22 program for associating areas in diagrams to appropriate pictures, a conversion program to combine 

23 the pictures and diagrams into one or more presentable pages, and a deploying program to send these 

24 pages to network sites from which potential buyers can view the pictures using the diagrams as a 

25 guide. The home presentation can be viewed in one or more modes. The initial mode allows the user 

26 to view the presentation in a package with a small number of pictures to provide a short time for 

27 downloading. A presentation in detailed mode includes more pictures. In any mode, in order to 

28 \ conserve screen space, the presentation initially displays only two or more picture boxes and some 

29 text. As the viewer navigates through the pictures and areas in pictures, the contents of the picture box 

30 switch accordingly. At any point in the navigation, the viewer can request further information, such as 

31 a larger picture, video images, virtual tours, or additional text descriptions of the area, or request to 

32 upgrade to a more detailed mode, if available. 
33 

34 It is an object of the present invention to provide a system for the online presentation of real 

35 property such as houses 
36 

37 Another object of the present invention is to provide a system for online presentation of real 

38 property which gives homeowners, real estate agents or other users the flexibility to choose to show 

39 whatever parts of the home they prefer, both externally and internally (structurally). 
40 
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1 Another object of the present invention is to provide a system for online presentation of real 

, 2 property which can be utilized by individuals having little or no experience using computer aided 

3 design programs. 

4 ' r 

5 Another object of the present invention is to provide a system for online presentation of real 

. 6 property in which the sketching program does not require an explicit installation procedure on a user's 

7 computer system, such that once the user has connected to the network, the program can be started 

8 directly. 
9 

10 Still another object of the present invention is to provide a system for online presentation of 

11 real property in which the homeowner, realtor or other user can eliminate redundant and/or 

12 unnecessary pictures from the system, thereby conserving network bandwidth and reducing time 

13 needed to download and view the images. 

14 • 

15 Another object of the present invention is to provide a system for online presentation of real 

16 property in which the viewer can choose images from a package comprising either a small or a large 

17 number of images, such that the viewer can select whether to view a few images in order to facilitate 

18 their downloading, and if the property is interesting, the viewer can view additional images. 
19 

20 Still another object of the present invention is to provide a system for online presentation of 

21 : real property in which the pictures and diagrams needed for the system can be prepared by 

22 nonprofessionals, from their own home or place of business, and transmitted through the network. 
23 

24 Yet another object of the present invention is to provide a system for online presentation of 

25 real property in which potential buyers can have an intuitive view of the property layout through 

26 v structural diagrams (maps and floor plans), and the potential buyers can easily navigate the pictures 

27 using the structural diagrams as a guide. Areas with corresponding pictures are optionally marked in 

28 the diagram being viewed, and a picture is shown in a box beside the diagram whenever the viewer 

29 moves the cursor into the corresponding areas. 
30 

31 Yet another object of the present invention is to provide a system for online presentation of 

32 real property in which a large amount of information can be displayed through a small screen space 

33 one group at a time, therefore providing a possibility of having a few of such presentation side by side 

34 in one computer screen, making it easier to compare different properties. 
35 

36 Yet another object of the present invention is to provide a system for online presentation of 

37 real property in which navigation of the system can be done intuitively. The system can optionally 

38 include a "Direct Navigate" capability, in which the viewer can place the cursor in a picture being 

39 viewed, and switch to an appropriate neighboring picture, such that when the cursor is moved in a 

40 certain path, such as to the right, the picture, if any, showing the part of the house to the right of the 
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1 current picture will be switched in. 
2 

3 It is also an object of the present invention to provide a method for the online presentation of 

4 real property such as houses 

c 5 ' 

6 Another object of the present invention is to provide a method for online presentation of real 

7 property which gives homeowners, real estate agents or other users the flexibility to choose to show 
; 8 whatever parts of the home they prefer, both externally and internally (structurally). 

9 

10 Another object of the present invention is to provide a method for online presentation of real 

11 property which can be utilized by individuals having little or no experience using computer aided 

12 drawing programs. 

13 . 

14 Still another object of the present invention is to provide a method for online presentation of 

15 real property in which the homeowner and/or the realtor can eliminate redundant and/or unnecessary 

16 pictures from the system, thereby conserving network bandwidth and reducing time needed to 
17 ' download and view the images. 

18 

19 Another object of the present invention is to provide a method for online presentation of real 

20 property in which the viewer can choose images from a package comprising either a small or a large 

21 number of images, such that, the viewer can view select whether to view a few images in order to 

22 facilitate their downloading, and if the property is interesting, the viewer can view additional images. 
23 

24 Still another object of the present invention is to provide a method for online presentation of 

25 real property in which the pictures and diagrams needed for the system can be prepared by 

26 nonprofessionals, from their own home or place of business, and transmitted through the network. 
27 

28 Yet another object of the present invention is to provide a method for online presentation of 

29 real property which potential buyers can easily navigate the pictures using the structural diagrams as a 

30 guide. Areas with corresponding pictures are marked in the diagram being viewed, and a picture is 
.31 shown in a box beside the diagram whenever the viewer moves the cursor into the corresponding 
32 areas. 

33 

34 Yet another object of the present invention is to provide a method for online presentation of 

35 real property in which navigation of the system can be done intuitively. By inclusion of a "Direct 
36 . Navigate" capability, the viewer can place the cursor in a picture being viewed, and switch to an 

37 appropriate neighboring picture, such that when the cursor is moved in a certain path, such as to the 

38 right, the picture, if any, showing the part of the house right of the current picture will be switched in. 
39 

40 The present invention is a software program, preferably but not necessarily a distributed 
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1 software program, for displaying images and structural diagrams of homes that may run on a computer 

2 network, includes a sketching program which may be stored in a server computer and can be started 

3 from a client server-side conversion,and communication programs, and a client side viewing program, 

4 Homeowners (using Sketcher, or other creation parties) from various locations input, such as by 

5 drawing, upload images of the homes, such as floor plans and other descriptions of the property, for 

6 „ viewing over the network by an individual at another location. The Sketcher obtains the drawing 

7 program, an applet with a graphic user interface, and enters images of the home onto the server. A 

8 conversion program converts the completed images and other data into pages suitable for deployment 

9 on the network and viewing by others. The network can be the Internet, World Wide Web, or other 

10 communications network. The images include a frontal view of the home, and indicia indicating the 

11 level at which the cross-sectional image has been made available. A typical home has an overview 

12 map; and three floor plans, but the number is determined by the Sketcher. Potential buyers retrieve 

13 floor plans from the servers using a graphics-enabled viewing program and decide whether to take 

14 further action regarding a home purchase. The size and number of images the buyer can download can 

15 be adjusted to minimize download time and conserve network and computer resources. 
16 

17 BRIEF DESCRIPTION OF THE SEVERAL VIEWS OF THE DRAWINGS 

18 Fig 1 shows an overview of the present invention. 

19 Fig 2 shows the user interface of the sketching program of the present invention. 

20 Fig 3a and Fig 3b illustrate the interface of the viewing program, for viewing and navigating the house 

21 online. Fig. 3a illustrates the screen's appearance when the viewer moves the cursor to a height mark 

22 to show a cross-sectional diagram corresponding to this height. 

23 Fig. 3b illustrates the screen's appearance when the viewer moves the cursor to a marked area in the 

24 diagram to display the corresponding picture. 1 

25 Fig. 4 illustrates the operation of the algorithm Marked Area to HTML. 

26 Fig. 5 shows the data and code pieces and logic flows among them in the sketch program running on 

27 the client side. 
28 

29 DETAILED DESCRIPTION OF THE INVENTION 

30 As shown in Fig 1, the system of present invention is based on a computer driven network 100 

31 such as the Internet, or a more recent variation of the Internet called the World Wide Web "(the 

32 Web"). Although reference in this specification may be made to the Internet or the Web, it is to be 

33 understood that the present invention is not restricted to either or both, and is intended to include other 

34 communications networks, such as intranets, extranets, local area networks (LANs"), wide area 

35 networks ("WANs"), other ,private communications links, using both wired, wireless and satellite 

36 4 technologies and the like. The Internet and the Web comprises a plurality of individual computers 

37 which are interconnected with a plurality of server computers 112, 120 using a communications 

38 means, such as a telephone network, cable communications network, fibre optic communications, high 

39 speed digital subscriber lines ("DSL"), wirelessly or the like. 

40 The term Seller (or Sketcher or Homeowner) 130 refers to any other individual who knows 
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1 enough about a home for sale and is going to create structural diagrams for this home (which can be a 

2 house, an apartment or condominium, a building, or other real property, including commercial or 

3 industrial property). The Seller or Sketcher may be the same person, or may be one or more persons, 

4 but for purposes of the present specification, will be considered to be the same person. Thus, for 

5 , example only ant not intended as a limitation, Seller may be the actual homeowner whose house is 

6 being offered for sale, the realty agent handling the transaction for the Seller, or a service person 

7 creating a presentation for them. Although not shown in the Figures, Seller 130 accesses the present 

8 " invention using either a personal computer at the Seller's location (whether residence, place of 

9 business or the like), or other computer workstation or device through which Seller may have access to 

10 the network 100. Such a point of access could even include a library, kiosk in a public area, such as a 

11 real estate office, hotel or the like. Sketcher starts the Sketch Program 102 on Server Computers 112 

12 in Network 100. Before starting, the Sketch Program 102 may need to be downloaded from Server 

13 i" 112, unless it has been previously downloaded and is still usable. This download step can be, and 

14 generally is, implicit, as in the case of a Java (Trademark of Sun Microsystems, Inc. San Rafael, CA) 

15 Applet which runs in an Internet browser. Java applets are small computer programs, and are known 

16 to those skilled in the art. Examples of Internet browser include Microsoft's Internet Explorer) or 

17 Netscape's Communicator programs (Internet Explorer and Netscape Communicator are trademarks of 

18 Microsoft Corporation, Redmond, WA, and America On-Line-Time-Warner* respectively). Because 

19 the present invention is not restricted to the Internet or the Web, other graphic-enabled programs 

20 , which are used to connect computers connected to a network can be employed. What the Sketcher 

21 130 sees is that Sketch Program 102 is "starting"; is in contrast to traditional programs that require the 

22 explicit step of installation before they can be run. 

23 Diagram Resources 104 refers to the icons, images, texture, and colors of house components, 

24 and include elements such as, but not limited to, bathrooms, kitchen, windows, doors, stairs, lights, 

25 etc. During sketching, Sketcher 130 can freely use the elements of Diagram Resources 104 stored in 

26 Server 112. The uploaded pictures, sketched diagrams, and mapping between diagram areas and 

27 pictures are also stored in Server 112 as result 114. 

28 After the sketching (drawing of the various floor plans and their contents, other images of the 

29 home being offered, association of areas and image) is done, Conversion Program 106 converts these 

30 drawings (results) 114 into Presentable Pages 118. A Presentable Page 118 represents that the 

31 drawing has been converted from the format it was drawn in into a format that will enable that image 

32 to be viewed on the network, and any computer code supporting animation and navigation has been 

33 embedded in. Thus, a Presentable Page 118 may be in HTML (Hypertext Markup Language) or other 

34 language compatible with the network and with script and/or applet support. A Buyer or Viewer 110 

35 or 122 can view and navigate Presentable Pages 118 with View Program 108. View Program 108 is a 

36 general purpose platform used to show the various Presentable Pages 118. The View Program 108 

37 can support the graphic and interaction mechanism needed for the presentation package, where the- 

38 Structural Navigator 109, can be run. 
39 

40 To reduce the load of Server 112 and for certain business reasons, Presentable Pages 118 can 
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1 be deployed to other servers in Network 100 by Deploying Program 116. Viewer 110, using the 

2 Viewing Program 108 can view pages 118 deployed from other servers on the network. 
3 

4 It is to be understood that the present invention relates to the presentation of real property, 

5 other transactions related to the sale of such realty are outside the scope of the present invention, and 

6 will not be discussed further. These include transactions such as the establishment of a contract to sell 

7 the real property, a contract for the services of a realty agent, broker or the like, or communications 

8 between a buyer and seller after viewing the home using the system of the present invention. 
9 

10 Fig 3a. shows a user interface for using both Viewing Program 108 and Structural Navigator 

11 109. The interface comprises a Picture Box 200 and a Diagram Box 204. When a house is first 

12 brought up, the Picture Box 200 generally shows a frontal image, which typically is from a 

13 photograph, of the home, with a Height Bar 202 between this image and Diagram Box 204. Initially, 

14 the Diagram Box 204 may be a blank screen, but may include a help icon or message, should the 

15 Viewer 110 want assistance, such as, for example only, on how to proceed, or may show an overview 

16 diagram that may describe features such as the surroundings of the house. While the Height Bar 202 

17 may comprise Height Marks 206 measured proportional to real object heights, the Height Marks 206 

18 may also indicate the relative heights of specific cross-sections whose diagrams are to be shown. For 

19 example, the second floor's height marks is above the first floor's. When the Viewer 110 moves 

20 Cursor 210 to a Height Mark 206, the Height Mark 206 will be highlighted and a floor plan that 

21 corresponds to the home at this height will appear in Diagram Box 204. If Cursor 210 is moved to the 

22 background area (out of all height marks) of Height Bar 202, the initial overview diagram will show. 

23 In either case, if the Viewer wants to focus on the then currently visible diagram, he or she can click 

24 at the same mouse position. Here "focus" means to have Diagram Box 204 shows the diagram even 

25 when mouse moves out of Height Bar 202, thus makes area navigation described below possible. 

26 Fig 3b. shows what happens when the Cursor 210 is moved into Diagram Box 204. If Cursor 

27 210 is moved into a marked area of the Diagram Box 204 which is mapped to a picture of the home, 

28 that picture will then be shown in Picture Box 200, replacing the image previously displayed. If 

29 Cursor 210 is moved into an area of Diagram Box 204 which is not mapped to a picture of the home, 

30 , Picture Box 200 will either remain unchanged, show some text, or show a gray box, or display other 

31 tiling that may be indicative of a blank screen. 
32 

33 A Width Bar 212 may be displayed when the homeowner has included vertical cross-sectional 

34 views of the home, rather than the more traditional horizontal views used for a floor plan. Such a 

35 vertical view can illustrate how the rooms on the various floors of the home are situated. If such 

36 vertical sections are used, the width bar displays the relative positions of the vertical cross-sections 

37 1 with width markers. 
38 

39 In Figs. 3 A and 3B, the phantom lines represent the areas where a picture may be associated, 

40 where the picture would be shown in Picture Box 200 if the viewer 110 were to move the mouse into 



- 8 - 



WO 01/86622 



PCT/US01/15322 



1 those particular areas of the Diagram Box 204. As the cursor is moved over the area, the image shown 
2 , f in Picture Box 200 will change. The changing of the image in Picture Box 200 occurs in the absence 

3 , of any additional input by Viewer 110, such as in the absence of a signal from an input device such as 

4 a mouse or the like. Clicking in this area will lead to a new page showing additional contents, such as 

5 a larger picture, a video segment describing the image, a virtual tour, additional descriptive text or the 

6 like, and, if the presentation is in a lower mode consisting of smaller amount of material for quicker 

7 download, this request may trigger a mode upgrading and additional presentation material will be 

8 downloaded before navigation continues. The phantom lines may or may not be shown in the 

9 presentation. 

10 Fig 2 shows a typical layout of the graphic user interface ("GUI") of Sketch Program 102. 

11 Among the elements of the GUI are a Menu Bar 12, an Icon bar 11, and various groups of Controls 

12 20, 22, 28 and 30. The GUI comprises a Sketch Area 26 in which diagrams (such as the floor plans 

13 and/or vertical sections) are created and edited. Near Sketch Area 26 is a Cross Sectioner 14. The 

14 Sketcher 130 can drag a line 27 in the Cross Sectioner 14 to define the cross section position to which 

15 current diagram is to be associated. (In the resulted presentation, this cross-sectional view of the home 

16 would be indicated by an appropriate Height Mark 212 along Height Bar 202). While the view of the 

17 cross-section of the home is typically horizontal (as in the typical floor plan, described previously), the 

18 section can also be a vertical cross-section. The house itself is the background image in Cross 

19 Sectioner 14 under line 27. The program also has a Picture List 16. The Sketcher 130 can define a 

20 Picture Area 24 in the diagram and find the corresponding picture in Picture List 16 to map them to 

21 each other. Alternatively, the Sketcher 130 can select a picture by entering or picking its name from 

22 Picture Name Box 18, and the selected picture will be shown in Picture List 16. Since usage of Cross 

23 Sectioner 14 and Picture List 16 are exclusive, they can share the same window area to save space. 

24 Fig. 2 also illustrates the groups of controls and text/icons that are part of the GUI. Among 

25 these elements are a Menu Bar 12, an Icon bar 11, and various groups on Controls 20, 22, 28 and 30. 
26 

27 CONTROL AND TEXT/ICON GROUPS 

* 28 The layout of controls can be quite flexible, below is just one way of organizing them. 

29 1. The Diagram Control Group includes the controls for creating new diagrams, functions such as 

30 open, save, close, specifying diagram parameters (such as name), and converting diagrams to various 

31 representation formats, etc. One way to place these functions is in reference numeral 12 in Fig. 2. 

32 2. Optional View Group, one way to place these functions is in reference number 10. In Fig. 2, the 

33 w Sketcher 130 is allowed to examine the diagrams in either a 2-Dimensional ("2D"), 3-Dimensional 

34 • ("3D"), or Multi-piece view. 

35 3. The Edit Control Group, one way to place these functions is in reference number 20, includes 

•36 modes such as Select, Line, Area, Text, Component, Marker, and Trace. Each of the controls in these 

37 groups must work with the Choices of Operation Group 22 components. The choices in Operation 

38 Group 22 change with Edit mode, as described below: 

39 3.1. Select. This mode enables the sketcher 130 to choose the shape(s) in which an area (or the 

40 object(s) it indicates) in the image can be selected, including Point, Rectangle, Oval, 
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1 Polygon, Color (to select an area of the same or similar color), and so on; and operations 

2 on the selected area such as Move, Copy, Rotate, Flip, Scale, Stretch, and the like. 

3 3.2. Line. Provides a choices of lines and "hollow shapes", which differ in thickness and 

4 style. The Sketcher 130 has the flexibility of choosing the color and style associated to 

5 lines. Hollow shapes such as a rectangle, polygon, or oval can be used to represent 

6 elements of the home, such as the walls of a room. 

7 3.3. Area. This mode provides a choices of very thick lines and "solid" shapes (such as a 

8 , filled rectangle, polygon, oval, etc, in contrast to the "hollow"shapes described in the 

9 previous paragraph). Different colors and filling patterns can be specified to fill the area of 

10 these solid shapes. Solid shape can be used to represent elements of the home such as the 

11 areas inside rooms. For example only, and not intended to be a limitation, a light-cyan- 

■ ; 12 filled room means it is a kitchen, a dark-cyan-fill room means bathroom, green-filled area 

13 mean grassland, etc. 

14 . 3.4. Text. Choices of type face and styles. Different colors for /the text can be selected. 

15 3.5. Components. Choices of components constituting a house, selected from Diagram 

16 Resource 104, including Doors, Windows, Stairs, Stoves, Built-in Table, Closet, Lights, 

17 Fireplace, Sink, Toilet, etc. The appearance of these components can be either a top or 

18 side view, depending on how fancy the Sketcher 130 may desire to illustrate the home. 

19 In its simplest form, a component can appear in the diagram as a specifically colored area, 

20 e.g., dark-cyan-filled room means bathroom, as described in a previous paragraph. 

21 3.6. Marker. The Marker function allows the Sketcher 130 to specify areas shown in 

22 Diagram Box 204 that correspond to pictures. These areas can be rectangles, polygons, 
, 23 circles, etc, depending on the choice of the Sketcher 130, and the ability of the final 

24 presentable page 118 to accommodate such a shape. For example, if the presentable page 

25 118 will be written using HTML image map and Javascript to trigger events such as, but 

26 not limited to, onMouseOver and onMouseOut actions, all three shapes mentioned above 

27 can be used. 

28 There is similarity between Marker and Select's functions, these two modes can be 

29 combined in practice. 

30 3.7 Model. The Model mode allows the Sketcher 130 to specify a model image by entering 

31 its reference data such as network location. The model image will be loaded by the 

32 sketching program 102 and displayed in Sketch Area 26. Sketcher 130 can then transform 

33 it (such as move, scale, flip and the like) and possibly define an area of the model image, 

34 then copy it, in whole or in part, into the area and add it into the current diagram. The 

35 Sketcher 130 can also enter into a Trace operation in which the Sketcher' s drawings will 

36 be placed on an image buffer "over" the model image, so that the drawing result appears 

37 to be "floating" over the original. The purpose is to help the Sketcher to draw following a 

38 . model, like a beginner learning to paint by placing a piece of transparent paper on a 

39 picture. To facilitate distinguishing the model from the traced image, the sketching 

40 program 102 can switch from showing the model as is, as reversed video, or not showing 
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1 s . it at all. After tracing, the resultant lines can be inserted into the current diagram. 

2 : 1. Session group. Associated to individual mode-operation combinations, such as Line- 

3 ' Thickness 10 and Area-Oval. A common component of the Session group is a help area 

4 (icon/text) that provides a brief hint about what controls should be utilized under current 

5 i circumstance. Other session controls become visible only under the specific circumstances 

6 they are applicable. These controls include: 

7 4.1. For Select. Controls for Flip, Rotate, and other operations on the selected region of the 

8 drawing. For example, the control for Flip can be a selection list (such as a drop-down 

9 menu)including items such as "No Flip", "Vertical", and "Horizontal". The Rotate control 

10 can include one or two selection lists for degrees of rotation. Alternatively, these 

11 functions can be performed using image buttons rather than drop-down menus. 

12 4.2. For Text. A text field to enter text, or a character picker. 

13 4.3. For Component. Flip and Rotate controls. , 

14 2. Color group 30. This is a color palette. While working with Edit modes, color group 30 has 

15 two sections. The top section of the palette contains frequently used sketching colors. The 

16 other section of palette 30 covers more colors of the spectrum, for example, the 216 standard 

17 ; colors used for Netscape's web browser. 

18 Color is just one kind of "Filling Material". It is possible to fill the drawing, or parts thereof, 

19 using elements such as gradient, pattern, texture, etc, as long as the palettes for them are 
.20 loaded from Diagram Resource 104. 

21 3. Reverse group. This includes functions such as Undo or Redo, for either completed or 

22 partially completed operations. It also includes a function to cancel a partial operation. 

23 A related group of controls may be arranged in a container, which may have scrollbar(s) if the 

24 group is too large. Containers as well as controls can be hidden/removed when not needed. The 

25 controls can also be arranged in other manners known to those skilled in the art, such as through the 

26 use of drop-down menus, radio buttons and the like. 

27 " 

28 In addition to the main GUI window shown in Fig 2, other functions are contained within pop- 

29 up windows 28 in Sketching Program 102, and include: 



30 1 . Help (Information) Boxes. These are windows comprising help information, which can be a 

31 fixed set of information, or context sensitive information, using programs which are known to 

32 those skilled in the art.. While the Sketching Program 102 is intended to be very intuitive to 

33 operate, Help may occasionally be necessary because it is anticipated that most Sketchers 130 

34 are homeowners who would be infrequent users of the program. 

35 2. User Dialog Boxes. These are modal windows to show a warning or other status messages. 

36 The User Dialog boxes also allow for the Sketcher 130 to enter text. Such User Dialog boxes 

37 are known to those skilled in the art, and may comprise commands such as OK, Cancel, Yes, 

38 or No. 

39 3. Component Viewer Window. These windows provide additional convenience to the Sketcher 

40 . 130 for manipulating the house components in the diagram. The Sketcher 130 can select 
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1 individual components within the drawing area and modify their parameters. 

2 

3 The functions described above are feasible for use in computer networks using current 

4 technology, and are known to those skilled in the art. 
5 

6 Fig. 5 illustrates the operation of the sketching program 102 of the present invention on the 

7 client side (after downloaded from a server). The program comprises program components, data, 

8 events and control flows. The following details the conversion from sketching results to presentable 

9 pages. 

10 Given a collections of marked areas and their mapping to pictures, it is quite straightforward 

11 for a viewing program to switch pictures based on which area(s) contain the cursor, with certain 

12 simple conflict-resolving rule (e.g., areas marked later take priority). A web browser program 

13 supporting HTML image mapping and the Javascript functions onMouseOver and onMouseOut is one 

14 example of such viewer. 
15 

16 Some viewer programs, such as older versions of web browsers, often do not provide very 

17 , detailed cursor position information to the sketching program 102. For example, the viewer program 

18 108 may know that the cursor 210 is over an image, but does not know exactly where in the image the 

19 cursor 210 is positioned. To keep a diagram as a navigation guide, a single diagram must be split into 

20 small pieces, so that from each piece of the diagram one marked area can be identified to the viewing 

21 program as being an active image, (i.e., its corresponding picture is shown in Diagram box 204). 

22 For images in HTML, the image pieces are made into rectangular shapes (Fig. 4). The 

23 rectangular shapes are fit into a table within the program's data register. Some cells in the table may 

24 span across rows and/or columns to accommodate larger pieces of the image. Given a collection of 

25 rectangular marked areas, the following method is used to generate the table: 

26 \ 

27 Algorithm for Converting Marked Image Areas to an HTML Table 

28 1. Sort in top-down order the x-coordinates of all corner points of the marked areas. The top 

29 boundary of the table is in line with the top edge of the diagram. Set variable 

30 currentjboundary to be the top boundary. 

31 2. Repeat until there are no more x-coordinate below currentjboundary 

32 3. Get the x-coordinate closest to currentjboundary 

33 4. Create a new row boundary across this x-coordinate 

34 , 5. Set variable currentjboundary to this new row boundary 

35 6. Continue loop 

36 7. If the lower edge of the image is not in line with any row boundary, add a new row boundary 

37 at the position of this edge. 

38 8. Obtain column boundaries in a similar procedure as the above steps, but in a left to right 

39 order. 

40 9. Proceed as follows to obtain individual pieces of the diagram and output the structure. 
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< 1.10. Initially mark all cells in the table to be "free", and set current__cell to be the one in upper-left 

2 . : , corner of the table. Piece_collection is initialized to be an empty set. 

3 11. Output a starting table tag and row tag. 

4 12. Repeat: 

5 1 " 13. Initially set current_piece to include current_cell only 

6 14. Find a top-most area boundary below current_cell and crossing the column current_cell is in. 

7 Include into current_piece all the cells above this boundary and in the same column as 

8 current_cell. Now current_piece has the shape of a vertical bar. 

9 15. Identify the rectangle in the table whose left edge matches exactly that of the vertical bar, and 

10 whose right edge is the right-most one such that no area boundaries are contained inside 

1 1 the rectangle. Set current_piece to be this rectangle. 

12 16. Mark all cells in current_piece "used" and add current_piece to piece_collection. 

13 17. Output a table cell definition tag that has rowspan and colspan set corresponding to the 

14 rectangle. 

15 18. Set current_cell to be the most "upper-left" free cell, if any, where the most upper-left means 

16 first find the top-most table row that contains free cells, then pick the left-most free cell in 

17 this row. 

18 19. If the new current_cell is in a different row than the previous, output an ending row tag and a 

19 starting row tag. 
, 20 < 20. Continue loop. 

21 21. Output an ending row tag and table tag. 

' 22 22. The elements in piece_collection are all the pieces constituting the diagram. Create diagram 

23 image pieces based on geometric information stored in piece_collection. These images will be 

24 embedded in the appropriate positions in the table. 

25 23. End of the algorithm. 
26 

27 The present invention includes functions sufficient to recognize various versions of viewing 



28 programs 108, and this algorithm is activated under appropriate conditions. After the algorithm is 

29 employed to convert the marked image to an HTML table, the presentation program proceeds to 

30 display the images. 
31 



32 Second Embodiment 

33 In the Algorithm for Converting the Marked Image Areas to an HTML Table, all corner points of all 

34 image areas are taken into account. An advantage of this first algorithm is that is has preserved all 

35 information, and potentially allows one image piece to trigger the display of multiple pictures whose 

36 areas cover the cursor position of that image's piece. A disadvantage of the first algorithm is that it 

37 can result in having more image pieces than necessary, especially if only one picture is to be 

38 displayed. 
39 

40 To solve this problem, this second algorithm removes the corner points that are hidden by the 
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1 other image areas before the sorting step (step 1 of the Algorithm for Converting the Marked Image to 

2 an HTML Table). This second algorithm then modifies the area boundaries to remove any parts 

3 -. hidden by other areas (this may result in zero, one, or more than one line segment from one area edge). 

4 Once these steps are performed, the second embodiment follows the same steps as described for the 

5 Algorithm for Converting the Marked Image to an HTML Tables. 

6 Fig. 5 illustrates the "engine" part of Sketching Program 102, and works as an event-driven 

7 system. 

8 From Sketcher 130, there are two major event types: Control Events 300 and Draw Events 302, which 

9 generally represent events originating from the controls around Sketching Area 26 and those from 

10 Sketching Area 26 itself, respectively. Based on the event received from the Sketcher,, Event Handler 

11 304 calls the appropriate subroutines of the present invention to modify the respective data entities and 

12 iipdate the images displayed on GUI 314. These subroutines include the session and related routines 

13 . 306, drawing subroutines 308, recording subroutines 310, and communication subroutines 312. After 

14 the sketching hsa been done, data is stored in the data and image buffers 316, and at 318, the updated 

15 ' sketch is sent to the user interface. The control events 300 actuate the various program events 320, 

16 >'•• i which actuate the icons, and other sketching parameters 322, which are also transferred into buffers 

17 316. The drawings are sent, as a refreshed drawing, to the user interface at 324. 

18 The core data entities are drawing images itself. The drawing images are represented in a 

19 layer-and-object structure. This structure may comprise a number of layers, while each layer may 

20 comprise a number of objects, which can be vector-compressed shapes or bitmap images, as known to 

21 those skilled in the art. The final image is the result of rendering all of the layers bottom-up. The 

22 advantage of objects is that they can be selected and manipulated individually, such as move and 

23 rotate. It also helps in identifying which component or home element is picked from the program's 

24 Diagram Resources 104. Without using objects, this identification, if necessary, may be achieved by 

25 using "Alpha-Channel" (as known to those skilled in the art, a byte used for carrying information in 

26 addition to the red, green and blue bytes used for describing a pixel), or by out-of-image comments. 

27 In the simplest case, there is only 1 layer of bitmap, and no objects. 

28 Bitmaps are stored in image buffers 310. One example of an image buffer is Java's Image 

29 class. The major component of an image buffer is a pixel matrix. To support an anti-flickering 

30 - technique called "double buffering", drawing codes must be made applicable both to "screen" and to 

31 image buffers. Image buffers can in turn be drawn to the screen. 

32 Objects are maintained in an object list, one for each layer. They are painted to an image 

33 buffer in bottom-up order. Each object has a vector or bitmap representation. It has a method called 

34 IS_AT. Given a position, this function tells if this position is at this object, and is used to determine if 

35 this object is selected by a particular select action. Objects are ordered. To the user's view (i.e., the 

36 Sketcher 130 or Buyer 110, one object may be in front of another (i.e., in an upper position). This 

37 order is not only used for rendering, but also used in selecting. In rendering, objects in the back are 

38 drawn first. In selecting by means of an input device, such as a mouse click, the most front object 

39 with IS_AT (clock position) equal to true is selected. By default, a newly introduced object is the 

40 most front one in the current layer. 
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1 More complete information about the data entities handled by the Sketching Program 102 

2 follows, wherein: the following abbreviations are used, "crnt" for Current:, and "prev" for previous. 

3 1, State Data Entities include: 

4 crnt_mode 

5 prev_mode 

6 crnt_operation 

7 prev_operation 
8, crnt_color 

r 9 prev_color 

10 in_session indicating current session type 

11 crnt_layer; prev_layer 

12 crnt_object; prev_object; 

13 crnt_keyboard_focus,* 

14 prev_keyboard_focus. 

15 Because these terms are known to those skilled in the art, they will not be described further. 

16 Other state data, such as crnt_area, crnt_cross_section, crnt__picture, modify flags, reverse 

17 video flag in tracing mode, and other state data known to those skilled in the art. 

18 2. Geometric Data Entities include: 

19 crnt_x; crnt_y; prev_x; prev_y; 

20 data for selected region; 

21 degree of rotation; 

22 direction of flip; 

23 ratio of resize, etc.; 

24 Other geometric data. 

25 3. Design Data Entities 310 include: 

26 Image buffers . These buffers are used for an on-going session, for a previous session, for 

27 model image, for the result of a tracing, and some auxiliary buffers. One buffer may serve multiple 

28 purposes to reduce the use of system resources. 

29 For example, in a "simple" situation using a minimum of system resources, the buffers may 

30 be configured to as to have a master image buffer, a reverse image buffer, and, optionally, a volatile 

31 image buffer. The master buffer generally represents the image that is displayed in the sketch area 26 

32 viewed by the sketcher 130. Before a session starts, the contents of the master buffer are copied into 

33 the reverse buffer, and all of the subsequent partial drawing occurs with the master buffer. When an 

' ' 34 Undo command is executed, its reversing action will swap the role of master and reverse buffers. The 

35 volatile image buffer is used to draw temporary contents, such as the image cursor, auxiliary lines, and 

36 the like, with the master buffer as the background. In this case, the displayed image will be the 

37 contents of the volatile buffer. Every time the temporary contents change, the master buffer is copied 

38 to the volatile buffer, followed by drawing of the temporary contents, which is in turn followed by 

39 rendering of the volatile buffer to the screen. Without the volatile buffer, these temporary contents can 

40 b6 directly rendered to the screen, causing some flickering of the images on the sketched s viewing 
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1 screen. Generally, the temporary contents are small, thus having a negligible effect. 

2 The volatile buffer can also be used as temporary storage of filtering operations, such as 

3 , changing color, restrict to a region, or other bit-by-bit image conversions, as known to those skilled in 

4 the art. 

5 . ' 

6 In its present embodiment, the system has the capacity to perform a single undo step. The 

7 addition of more reverse buffers to the system can enable the use of multiple undo steps. In the 

8 absence of multiple reverse buffers, the undo steps would have to be implemented in a different 

9 manner using recorded actions. 
10 

11 Action recording . This optional feature tracks actions that have happened to the current 

■ 12 drawing, and can be used to playback the design. This feature is editable by the sketcher 130, and it 

13 may be organized in a list of timely ordered actions, or in a hierarchically grouped objects. Among 

14 • the parameters recorded include event type, mode, operation, geometric data, etc. 
:15 " 

16 4. Network Data entities, include: 

17 Addresses to retrieve real property data; 

18 Addresses of storage locations; 

19 Other network data. 
20 

21 The Sketcher 130 generates raw input events through an input device such as a pointing 

22 device and a text input device. Generally, the pointing device (not shown) is a mouse, but may be an 

23 equivalent such as an ACCUPOINT (Registered Trademark, Toshiba America Information Systems), 

24 TOUCH-PAD or the like. Generally text input device 206 is a keyboard (not shown), but may include 

25 other forms of test input devices, such as commands entered from a touch-screen display, and the like. 

26 Event handler 304 processes these events and converts them to abstract input events. For example, 

27 when the Sketcher 130 clicks a button corresponding to the Editing mode "String", the raw event of 

28 "mouse click at the button" is translated into an abstract event :"Enter Mode String". With this level 

29 of abstraction, the design program 102 has flexibility in the layout of the GUI, enabling the GUI to be 

30 a customized and/or redesigned so that the same "Enter Mode String" event is triggered in some other 

31 way, such as, for example only, by a second Sketcher' s selection from a list, such as from a drop-down 

32 menu. In the program of the present invention, this abstraction is implemented by clearly identifying 

33 the code routines which be called upon in each abstract event. Event handler 304 calls these code 

34 pieces upon the corresponding raw event(s). 

35 The handling of abstract events is described below, and the raw events that typically result in 

36 the implementation of the abstract event. 

37 . 

38 GROUPS OF EVENTS 

39 1. Enter-Mode Events 

40 There is one such event for each of the Editing Modes described above. The Sketcher 130 is 
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1 requesting the Design Program 102 to switch into the mode associated with this event. 

2 . Enter-Mode events are triggered when the Sketcher 130 clicks one of the buttons in group 20. 

3 In response, the sketching program 102 first finishes certain clean-up tasks, if any, from the 

4 previous mode. Then the program updates internal variables needed for the switch, and then refreshes 

5 (316) the GUI to show the appearance matching the new mode. 
6 : :>, \ 

7 Specifically: 

8 1.1 The clean up tasks include finalizing editing done in a prior session (see below); 
.9 1.2 Related internal variables include: 

10 1.2.1. crnt_mode; //current mode 

11 1.2.2. prev__mode; //previous mode 

12 1.2.3. crnt__op; //current operation (see below) 

13 1.2.4. prev_op //previous operation (see below) 

14 Since operations are connected to modes, mode switching must cause operations switching. 

15 When entering into certain modes and/operations, Sketching Area 26 will change, such as showing the 

16 Model image, show marked areas, etc. 

17 When entering a mode, the operation is switched to the one when exiting from the same mode 

18 last time. If it is the first time in this mode, the operation is set to a default one in the group. 
19 

20 Defaults are as follows: 

21 Mode Default Operation 

22 Select Rectangular area selector 

23 Line Thin straight line 

24 Area Rectangle 

25 Text Times New Roam typeface 

26 Component Grassland 

27 Trace Enter location of model image 

28 Marker Usually combined with Select, and generally has no default of its own. 

29 Is a rectangular area if used independently. 
30 

31 Refreshing the GUI usually means showing the triggering control(s) for this mode in proper 

32 visual form, such as a pushed down button, and the remaining controls in the group 20 in normal form, 

33 i.e., buttons which have not been pushed. The operation group 22 associated to previous mode is 

34 removed or hidden from operation container 29, and the operation group associated to current mode is 

35 added io or made visible. Similarly, the session control group associated to the operation in previous 

36 mode is replaced with that for the operation in current mode. 
37 

38 2. Enter-Operation Events 

39 Given mode, there is one such event for each Choice of Operations associated to the mode. 

40 The Sketcher 130 is requesting the Sketching Program 102 to switch into the operation associated to 
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1 this event. They are triggered when the Sketcher 130 clicks the icons in operation group 22 which is 

2 . held in container 27. 

3 , In response, the Sketching Program first finishes certain clean up tasks, if any, from the 

4 previous operation. The design program then updates internal variables needed for the switch, and 

5 refreshes the GUI to show the appearance matching the new operation. Specifically: 

6 2.1 The clean-up tasks include, finalize editing done in previous session (see below); 

7 , 2.2 Related internal variables include: 

8 2.2.1. crnt_op : //current operation 

9 2.2.2. prev_op; //previous operation 

10 2.3 Refreshing GUI usually means showing the triggering controls) for this operation in proper 

11 visual form, such as an icon with a frame, and the remaining controls in group 22 in a normal 

12 form, such as un-framed icons. In addition, the session control group associated to the 
• 13 previous operation is replaced with that for the current operation. 

; 14 3. Pick-Color Events 

.15 There is one Pick-Color event associated with each color in palette 30. Selection of a Pick- 

16 Color event indicates that the Sketcher 130 wants to change the color to be applied in the following 

17 drawing Sessions (see below). In certain mode-operation circumstances, a Pick-Color event means to 

18 fill all spots in a solid drawing element. 

19 Pick-Color events are triggered when the Sketcher 130 clicks on one of the color cells in 

, 20 palette 30. The associated color to the Pick-Color event is the color in the cell which has been clicked 

21 on. 

22 In response to a Pick-Color event, the Sketching Program 102 first finishes certain clean-up 

23 tasks, if any, for a previous color. The Sketching Program then updates internal variables needed for 

24 the switch, and refreshes the GUI to show the appearance matching the new color. 

25 • Specifically: 

26 3.1 The clean-up tasks include finalize editing done in previous Session (se below); 

27 3.2 Related internal variables include: 

28 32.1 crnt_color //current operation 

29 3.2.2. prev_color; //previous operation 

30 3.3 Refreshing GUI means showing the triggering controls) for this operation in proper visual 

31 * t form, such as a color cell with a frame, and the remainder of the controls in palette 30 in their 

32 . normal form. As mentioned earlier, in certain situations, Sketching Area 26 will be changed 

33 too. 

34 4. Draw Events 

35 This feature refers to a group of events that lead to direct changes in the Sketch Box 26. 

36 These events are initiated from the Sketcher* s action in this area. 

37 The Draw Events work in a Session. 

38 A Session comprises a single or a sequence of draw events. The result of a session is usually 

39 a graphic unit in the design image: a point, a line or trail, a shape, or the like. The result of a session 

40 may also be an auxiliary visual action, such as the movement of a graphic entity from one location to 
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1 another, or other manner of transforming the entity during a session. 

2 4.1 Point-Press Event; Point-Drag Event; Point-Release Event; and Point-Move Event. 

3 These are abstract events that are often used together in a session. 

4 A Point-Press Event is typically generated when the Sketcher depresses an input device, such 

5 as depressing a mouse button, or touching a point in a pressure-sensitive screen. This event includes 

6 information such as the coordinates of the pressed point, and the time when the press has occurred. 

7 • : 

8 A Point-Release Event is similar to a Point-Press event, except that the Point-Release event 

. 9 corresponds to the Sketcher's action of lifting the depressed mouse button or removing the finger from 

V 10 the point at which the touch-screen was pressed. 
11 

12 A Point-Drag Event is generated when the Sketcher moves the cursor by moving the pointing 

13 device in a "pressed" condition. Such dragging is known to those skilled in the art. One such event is 

14 corresponding to a very small step in the move, and carries information such as the coordinates of the 

15 starting point and ending point of this step, and its starting or ending time. 
16 

17 A Point-Move Event is the same as a Point-Drag event, except the Point-Move event occurs 

18 when the pointing device is in a released (i.e., no button has been depressed) condition. 
19 

20 4.2 Point-Click Event and Point Double-Click Events are "synthetic" events derived from Point-Press 

21 and Point-Release. 

22 A Point-Click event is generated when a Point-Release event follows a Point-Press event 

23 without any event in between. 

24 J ; A Double-Point-Click event is generated if two Point-Click events happen within a time 

25 " period without any event in between. The length of the time period can be set as required. 

26 4.3 A Click Session comprises a Point-Click Event. 

27 4.4 A Double-Click Session comprises a Point-Double-Click Event. 

28 4.5 A Drag Session comprises a Point-Press event, a sequence of Point-Drag Events, and a Point- 

29 Release Event. 

30 4.6 A Hop Session comprises a repeated pairs of a Point-Click Event plus a sequence comprising 

31 Point-Move, and a terminating Point-Double-Click or Point-Drag Event. 

32 4.7 A Move Session comprises a sequence of Point-Move Events. 

33 4.8 The above five (5) Sessions form the basic set of actions needed to sketch the home's structure 

34 comfortably. These sessions require the use of a pointing device with a single button. If the 

35 Sketcher's workstation includes a pressure sensitive screen, the Sketcher is only required to employ a 

36 single finger. These elements also form the basis for the present invention's advantage of being easy 

37 for an individual to learn and to use. 

38 4.9 Transformation Events 

39 These Events include such events as Scale Event, Flip Event, Rotate Event, and the like, 

40 ' which cause the size of the image to be scaled up or down, flipped in one direction or another, or 
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1 rotated any number of degrees, respectively. Each of these transformation events is normally a single- 

2 / event session. Although the present invention can achieve the same functionality with the basic 

3 ■ sessions described in the preceding paragraphs, using a control that is outside of Sketching Area 26 

4 can often be more accurate or easier to use. For example, the Sketcher 130 can enter a number into a 

5 text field to indicate the scaling percentage desired; click on an icon in a session control group to 

6 instruct the system to flip the image either horizontally or vertically; or select the exact degree to 

7 rotate the image from a list, respectively. 

8 4.10 Text Events 

9 Address Events: Seller enters a network address into a text field. This may trigger some 

10 network action, such as loading data from a network server. For security reason, if this server is 

1 1 different from the server the sketching program starts, the data may have to go into the starting server 

12 first which in turn will transmit to the sketching program.. 

13 The Seller may also enter the name of an area into the Picture List, enter a description of the 

14 room, such as dimensions, or other features of the room components, such as the name of the air 

15 V , f conditioning unit, manufacturer of an appliance, or the like. 

16 The Text Events are not necessarily part of a session. The Design program handles them by 

17 storing the text information in proper variable(s) to be used in later session(s). These events can also 

18 be categorized as Control Events instead of Draw Events because they may not directly change the 

19 designed image. 

20 4.11 Trace Events 

21 These events are related to tracing a model image, and are generally triggered when the Seller 

22 presses a corresponding button. A model image buffer is used during tracing to store a model image, 

23 if any. A tracing image buffer receives the tracing result. The tracing result can be inserted into the 

24 design image, which is stored in a separate design image buffer. The model image can be stored 

25 anywhere on the network, and input using any method known to those skilled in the art, providing it 

26 can be accessed by the presentation program. 

2? Copy-Model Event: This function allows the user to copy part (if a region has been selected) 

28 or all of the model image to the tracing buffer. 

29 Show Image, Contrast Image, and Hide Image Events: these functions control the display of 

30 \ the model image: Show as is; Show in /contrast (XOR'ed, reverse video); Color, or hide. 

31 Clear-Trace Event: Clear tracing buffer. 

32 Insert-Trace Event: To insert the traced or copied result into the tracing buffer to design 

33 image. 

34 Trace Events form single event sessions. 

35 4.12- — Session 

36 Below we describe in more detail how a session works in the present invention. 

37 Under any given mode-operation circumstance, it is made clear which sessions are expected 

38 and what to do in each type of session. Sessions are exclusive, and the system will not expect one 

39 session if the system is already engaging in a session. When the first event(s) in a session is received, 

40 the system start subroutine, called sessionjstart . It may sometimes take more than one event for the 
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system to determine which session to start. For example, a Point-Press Event may lead to either a 
Point-Click Event or a Point-Drag Event, so the system cannot determine which session to enter until 
the next event occurs. A Point-Drag Event can signal a Drag Session, and a Point-Release Event can 
signal a Click Session. In other situations, one session type may be a precursor of another session 
type. In the example of a Click Session in contrast to a Double-Click Session, the sketching program 
can either delay processing of the Click Session for a short period to distinguish it from a Double- 
Click Session. The system can also make the actions of two sessions compatible, so that the system 
will accept the effect of a previous click when handling the second click of a Double-Click Session. 
The subroutine esession_start is passed with the current session type, and any event data such as 
coordinate(s); text string, etc. 

If it is a multiple-event session, the sketching program will wait for the coming events. When 
a new intermediate event is received , a session_update subroutine is called., Depending on the event 
type, it may be an update^point, update_point_pair, and so on. The event data are passed into these 
subroutines. 

Upon receiving an ending event for the current session, the subroutine_end is called with 
event data. 

All drawings in the session are done to an active data structure including image buffer(s) and 
other variables. For the purposes of Undo, the changes are not immediately merged into a more 
permanent data structure. That will be done through subroutine session_finalize upon next Enter- 
Mode, Enter-Operation, Pick-Color, Session Start, and other events that may need the active data 
structure to take new changes. 

5. Reverse Events. 

UNDO Event: Using this function, the contents of the active data structure are replaced with a 
set of contents that has been stored in another data structure. In the present invention, the system has 
memory sufficient to perform a single undo step, although the system's memory can be expanded to 
include the ability to handle a larger number of undo steps. In an UNDO step, the data swapped away 
from the active data structure is not discarded immediately, because the data may be needed again in a 
REDO step. If the next action is not a REDO step, the data swapped away is discarded. 

REDO Event: This is actuated when the Sketcher 130 wants to go back to the step that was 
just undone by the UNDO event, and the Sketcher 130 either presses the REDO Button or selects 
REDO from a menu. If the UNDO step has been done by tracking its history data structure, REDO is 
done by tracking forward. Such forward and backward movement of in software is known to those 
skilled in the art. 

CANCEL Event: This is actuated by depressing the Cancel button, and means to terminate the 
current session and undo it. 

6. PRESENTATION EVENTS 

OPEN EVENT: This step loads an existing presentation into the active data structure. 
Existing presentation are stored on the network. While they may likely be stored on the same server 
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1 from which the program is starting, such presentations may be stored elsewhere on the network, or on 

2 another computer or computer system connected to the network. The Sketcher 130 is given a chance 

3 to enter its address (i.e., URL or other identifying information) or browse it. 

4 SAVE EVENT: This command composes and stores the presentation to the network server(s). 

5 While such they most likely are stored on the same server from which the program is starting, such 

6 presentation may be stored elsewhere on the network. The Sketcher 130 is given a chance to enter its 

7 address (i.e., URL or other identifying information), browse a storage location, or alternatively the 

8 system can automatically generate an address. 

9 NEW EVENT: create a brand new presentation set 

10 CLEAR EVENTS : clear current diagram or clear the whole presentation. 

11 8. MISCELLANEOUS EVENTS: 

12 HELP EVENTS: The Sketcher has a question, and these events are triggered by actuating the 

13 HELP button or selecting HELP from a menu. In response to the Sketcher' s inquiry, the sketching 

14 program can show general help as well as context-sensitive help. 

15 COMMUNICATION EVENTS : The Sketcher 130 wants to communicate with the starting 

16 server or other network computers, such as making comments or requesting further information. The 

17 Address Events described above are also a form of communication event. In response to a 

18 communication event, the system of the present invention actuates the network subroutines necessary 

19 to complete the task requested by the Sketcher. 

20 ■; 

21 In response to the events described above, the sketching program will activate certain 

22 subroutines. The implementation of these subroutines depends upon the computer language and 

23 ; software packages used by the system. These subroutines have been used in many existing programs, 

24 and are known to those skilled in the art. Except for certain special cases, therefore, these subroutines 

25 are listed without further explanation. 

26 A. LINES AND SHAPES. These are of various thicknesses and lengths. Lines can be a 

27 sequence of straight segments, or of some analytic form, such as Bezier curves. Shapes can 

28 be filled with colors, patterns, texture etc. 

29 B. IMAGE. Can be rendered as is, filtered or scaled. 

30 C. TRANSFORMATION, ROTATE, FLIP, STRETCH. 

31 * ."■ D. TEXT. Can be added to certain locations, with certain fonts, sizes, color, style and the like. 

32 E. OBJECT HANDLING, such as select, add, delete, duplicate, move, etc. The result of a 

33 session can either be object(s), or change(s) made directly to a "background" image. Objects 

34 floating over the background image can be handled independently of the background. The 

35 object feature provides flexibility, but requires greater system resources and for the Sketcher 

36 to have a higher level of skill. This feature can be eliminated from the program in systems 

37 lacking sufficient resources and/or where network bandwidth may be insufficient, because 

38 similar effects can be achieved through selecting and manipulating regions. 
39 

40 COMMUNICATION PARAMETERS: 
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1 1. READ: System reads a certain type and amount of data from a specific address. 

1 2 2. WRITE: System writes a certain type and amount of data to a certain address. 

3 3. BROWSE: System browses selected directories in the network. 
4 

5 MISCELLANEOUS: 

6 1. PARSE text file in a certain format. 

7 2. Generate a random number or pick a random entry. 

8 " ' ■ ' 

9 SESSION CHARACTERISTICS: 

10 Many actions that occur within the sessions are circumstance specific, and certain sessions, as 

11 described previously, may have no effect on the final result, but there are some guidelines that are 

12 generally applicable. 

13 A Click-Session generally means selecting an object, a location or an area without any 

14 modification. If the session employs the "Fill" circumstance, then the selected target will be filled 

15 with either the current color (crnt_color) selected from the palette, or another filling material selected 

16 from the program's menu. 

17 A Double-Click-Session generally triggers a point-oriented action, such as dropping a home 

18 component at that location in the sketch. 

19 A Drag-Session is used to draw a line (straight or curved), to draw a standard shape or object 

20 (rectangle, oval, text, etc.), to move something from place to place within the sketch, to specify an 

21 angle and quantity of a transformation, to indicate the direction of a gradient fill, and the like. 

22 A Hop-Session is used to draw a line or polygonal shapes. A Hop-Session is especially useful 

23 when drawing a fine-tuned target, in comparison to doing so during a Drag-Session. In a Hop- 

24 Session, the Sketcher can see the would-be new point of the sketch when the cursor is moving. This 

25 new point is not added into the sketch until the next Point-Click, which occurs after the Sketcher is 

26 satisfied with the appearance of the sketch. In contrast, in a Drag-Session the entire trail of the cursor 

27 is recorded within the sketched image, even if a Drag has been performed by mistake, or includes 

28 rough lines drawn by a mouse which has not been moved in a smooth path. 

29 A Move-Session is used to show an icon that moves with the cursor; such a session generally 

30 has no effect on the sketch. For example, the image of an item within the floor plan can move with 

31 the cursor, so that it is clear to the Sketcher where the appropriate location to put that item is in the 

32 floor plan. 

33 The descriptions of other single event Sessions, such as Horizontal-Flip, Resize-to-Ratio, 

34 Rotate-To-Degree, Copy-Model-Image, Hide-Mode-image, Insert-Traced-Result, and the like, are 

35 apparent to those skilled in the art based on their nomenclature, and, accordingly, will not be described 

36 further. 

37 As a session progresses, all actions that occur will be recorded in the system's recording data 

38 structure, if this function is turned on. 

39. 

40 SESSION ACTIVITIES: 
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1 1. In many circumstances, the handling of single event sessions are triggered from related controls 

2 outside Sketch Box 26. 

3 2» In Operation Lines in any mode, 

4 Handle Drag-Session and Hop-Session. 

5 . 3. In Operation standard shapes (such as rectangle, oval and others that can be defined by two points) 

6 in any mode, 

7 Handle Drag-Session. 

8 4. In Operation polygonal shapes (that requires more than two points to define) in any mode, 

9 Handle Hop-Session. 

10 1 5. In Operation Move, Copy, and Gradient Fill in Mode Select, 

11 Handle Drag-Session. 

12 6. In Operation (Non-Gradient) Fill in Mode Select. 

13 Handle Click-Session. 

14 7: In Operation By-Color in Mode Select, 

15 Handle Click-Session. 

16 8. In Mode Text: 

17 Handle Drag-Session and Click-Session. Although the Sketcher can click at a location and 

18 enter text, the Sketcher can enter text in a separate text field and then drag it into the Sketch Box 26. 

19 The text will be resized and relocated as the cursor moves, and be added into the sketch after the 

20 session ends. 

21 9. In Mode Component 

22 Handle Double-Click-Session and Drag-Session. Different items may have different 

23 behaviors in Drag-Session. Some items, such as the size of a door or window, are resizeable, and 

24 Drag-Session will define their final size. Other items are not resizeable, and Drag-Session will drop 

25 them along a line. To avoid the sketch being overcrowded, the next drop will not be done until it is 

26 sufficiently far away from the previous drop. 

27 Handle Move-Session. 

28 10. In Operation Address and Move-to-Insert in Mode Trace, 

29 Handle Drag-Session. For Address, the model image is moved. For Move-to-insert, the 

30 traced result is moved. 
31 

32 From what we have presented so far, it should be clear that once set up, how sketching 

33 program 102 supports the Sketched s drawing actions. Next we describe how to set up and initialize 

34 the program, how to clean up and terminate it, and how to load and save data. 

35 During start up, the sketching program loads certain configuration and interface data from the 

36 starting server, including geometric data, icons/images, text strings, addresses, and business data. Int 

37 initializes to a default design state that is convenient for the user to get started. To start, Mode String 

38 and Operation Line X (meaning a line with width X) are actuated. The action recording data structure 

39 is initialized to be empty. The necessary image buffers are created. 

40 If the Sketcher wants to exit the program, sketching program 102 will so prompt the user, if 
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1 / necessary, with a reminder about saving any unsaved work and related information. Then the 

2 sketching program 102 will turn control over to other processes such as furnishing more information 

3 to the system about the property being listed. 

' 4 , 

5 Server 112 is the source of all functionality because the client side sketching program starts 

6 from the server and communicates with server. But as compared to the client side design program 

7 described so far, the interface in the server side program to the client is relatively simpler. Server 112 

8 holds a copy of client side sketching program 102 and all the supporting icons, images, configuration 

9 files, and so on. In response to sketched request to load the program, server 112 sends these data out 

10 (possibly acquire unavailable data from other servers before sending). During the drawing stage, the 

11 client computer does not have to be connected to the server at all times; the connection needs to be 

12 maintained or reestablishing only if the client program 102 requests additional floor plan resources, 

13 wants to save their results, or send other messages to the system or other elements of the network. 

14 . However, the server side of the system does play a role in the overall process. 

15 -Diagram resources may come from different providers, and may need to be in a compatible 
,16 format for use with the present invention. 

17 -While it is possible to have a copy of all the required resources in a single server, different 

18 realtors may have multiple servers in the network, in order to overcome network reliability problems, 

19 to increase marketing visibility, balance server load, etc. The system must coordinate different mirror 

20 servers as well. 

21 -Several realtors, homeowners, and service providers may share a single server to save cost. 

22 The server side program runs on every server involved. In the minimum case, it runs on a 

23 single server for a single realtor. In a broader view, it runs on computers distributed all over the 

24 network for realtors world wide. The servers can communicate with each other. Different tasks, such 

25 as searching, may be handled by the same servers or by different servers. If necessary, a number of 

26 master servers can be used to maintain overall pictures of the distributed system, redirect user hits, 

27 collect contact data, and carry out other administrative tasks. 

28 Each program execution may activate all or part of its modules. The server program contains 

29 the following major modules: Resource Manager, Server End Designing Interface, E-Commerce 

, 30 ' Module, and Administrative Module. The Server End Designing Interface has been described above. 

.. 31 

' 32 The functions of the other modules are described below. Details of the implementation of 

33 these modules will be omitted because an average programmer (one having ordinary skill in the art) 

34 would have no difficulty realizing them using existing technologies of the industry. 
35 

36 RESOURCE MANAGER: 

37 The Resource Manager stores, organizes and provides presentation resources. There are three 

38 types of resource. The first, Type One, comprises 2-dimensional or 3-dimensional representations of 

39 ' physical items, such as walls, doors, kitchen or bathroom fixtures and the like. The second, Type 2, 

40 1 resources, are model images that customers can copy or trace. The third, Type 3, are computer 
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1 program pieces to support animation and navigation. For type one, the system may maintain 

2 information such as manufacturers, model numbers, etc. For type two, the skill levels required for 

3 following, tracing, and implementation must be indicated. For type 3, the applicable platforms and 

4 situations must be indicated. All types needed to be well categorized to make it easy for users to 

5 choose for different purposes. 

6 There are several different standard formats for visual representations, such as the GIF and 

7 JPG formats used. 

8 Resources are organized by categories for easy browsing. They can be searched by key 

9 words. The categories and key words can be based on type of room, size of room, room nomenclature 

10 of other description. 

11 Different resource entities may have different numbers and types of attributes. Their database 

12 representations must take a general format that can accommodate all of them, and allow null fields for 

13 those with smaller number of attributes. A format field governs the interpretation of the formats. For 

14 example, format 102 can mean, integer field 1 contains manufacturer id, integer field 2 contains color 

15 id, integer field 3 contains taste id, integer field 4 contains material id, floating number field 1 means 

16 width, floating number field 2 means height, and so on. Format 103 can mean, string field 1 contains 

17 the address of an image, integer field 1 contains painting style id of the image, and so on. Each entity 

18 has a unique ID number, a name, and possibly a version number for internal use. 

19 , { ■ 

20 There can be multiple indexes or category trees based on different criteria mentioned above. 

21 Keywords can be associated to category nodes as well as to resource entities. 

22 A few auxiliary tables are needed to define materials, color, style, and so on. 

23 , 

24 . Home components can be updated to a new version. Database modification, updates and 

25 other system maintenance can be done during certain times when the system may be shut down 

26 temporarily. It if is desired to keep the system of the present invention operational all the time, two 

27 sets of resource databases can be prepared, with all update work being performed on the duplicate set, 

28 and then the sets switched. After it is ready and from a certain time on, all new sketchers are directed 

29 to the spare set. The previous set will be detached from the system, after the last Sketcher using it 

30 finishes their work. 

31 Besides maintaining the resource information database as well as resource visual 

32 representations it has, the Resource Manager on each server can also talk to resource managers on 

33 other servers to get additional data. Their communication follows certain business and security 

34 protocol regarding availability, prices, and so on. 

35 The data maintained or collected by Resource Manager can be furnished to sketching program 

36 102 through the Server End Designing Interface described previously. 
37 

38 E-COMMERCE MODULE: 

39 This module takes care of -contacts between the potential buyer and a realtor, or directly with 

40 ■ the seller isf the seller so desires, within the limits allowed by statute. While it is conceivable that the 
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1 entire transaction for the sale of real property could be carried out online, such transactions are outside 

2 the scope of the present invention, but could be included as part of an electronic commerce module. 

•3 ' 

4 ADMINISTRATIVE MODULE: 

5 This module administers membership, such as a list of participating realty agents, registration 

6 of the seller and buyer, and the like.. It handles customer comments and complaints. It also helps to 

7 manage marketing and other business activities, and undertakes system monitoring, backup and 

8 : replication. 

9 Alternative Embodiment: 

10 The sketching program can be simplified to reduce size and meet simple needs. On the other 

11 hand, the system can be enhanced to be more attractive and more powerful. 

12 In the simplest case, the sketching program can only enable drawing of lines and simple 

13 shapes, and saving of the result. Thus, if necessary, elements such as 3-dimensional view, Editing 

14 : Modes Select, Text, Tracing, Highlighter and Assembly could be deleted or their functions reduced. 

15 The sketching program can be enhanced. Sound effects could be added, to amuse the sketcher 

16 ; during the drawing process, or to provide audio help during the design procedure. For example, 

17 " whenever an operation is selected, in addition to showing its meaning only in the form of help text, the 

18 sketching program can read it out in a synthesized voice. 

19 As long as computer and network capacity permits, the system can incorporate various special 

20 graphic user interface behaviors and painting effects, making the sketching procedure more like the 

21 real operations of a draftsperson. 
22 

23 Operation of the Present Invention. 

24 Sketcher 130 follows these steps to create the home presentation, including pictures, 

25 diagrams, text, and mapping. 

.26 1. Obtain necessary pictures for presenting the house and its surroundings. This can include 

27 photographs, drawings, video or the like, where photos and drawings, possibly downsized 

28 version, can be used for showing during navigation, while their large size version, and video 

29 clips, virtual tours, etc, can be used for showing when further information is requested. Scan 

30 the pictures into a computer, if they are not already in the form of computer files. 

31 , 2. Name all the rooms, yards, etc, such as Rl, R2, R3, or Ra, Rb, Rc, This can include both 

32 interior rooms and the area exterior of the house, such as a yard, a deck, patio or the like. 

33 3. Name all the pictures with the names of the corresponding areas (room, yard, as prefix, such 

34 as Ra-1, Ra-2, r Rl-a, Rl-b. 

35 While it is not necessary for Sketcher 130 to follow these conventions, it is preferable to do 

36 so. 

37 4. Optionally prepare or obtain simple hand-drawn diagrams of the house, at different cross 

38 sections. Collect a copy of the blueprints of the property, if available. Scan the blueprints into 

39 a computer, if they are not already in the form of computer files. 

40 5. Optionally mark out in the hand-drawn diagrams the areas corresponding to the pictures, 
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1 (which will optionally be shown as the phantom lines in Fig. 3.) 

2 6. Connect the Sketcher' s computer to a network server where the diagram sketching program of 

3 the presents invention is available. 

. 4 7. Register the house information with a server, if it has not been done previously. (A previously 

5 registered home can be updated if desired). 

6 ,8. . Upload the pictures prepared above to a server, where a properly resized copy may be created 

7 if necessary. 

8 9. Start sketching program 102. This may include an implicit downloading from server 112, if 

9 the program has not already been downloaded to, or is resident on, the Sketcher ! s computer. 

10 ' During the download period, server 112 will display to Sketcher 130 information,- such as 

11 sketching guidelines, ideas, component resource introduction, advertising for realty related 

12 goods or services or the like.. 

13 10. Sketching program 102 is started. The Sketcher 130 can freely activate the various controls 

14 (Buttons, Selections, etc) in the graphics interface using an input device, such as with the click 

15 of a mouse. The icons associated with the various controls are designed to give the Sketcher 

16 130 hints on what they are for. After a control is triggered, and the Sketcher requests it, a help 

17 text (and possibly voice) gives more detailed information on what to do in that situation. Help 

18 functions in which live assistance can be obtained over the Internet are known, and are 

19 available on numerous e-commerce websites, and can be incorporated into the functions of the 

20 present invention.. 

21 11. Following help text or voice, Sketcher 130 initiates drawing, working with Cross Sectioner 

22 14, Picture List 14, Picture Name Box 18, and Sketching Area 26. Using Cross Sectioner 14, 

23 Sketcher 130 creates new cross-sectional diagrams, remove unwanted ones, modify their 

24 proportional and relative positions, select which diagram to work on. Sketching Area 26 

25 shows contents of the current diagram, the drawing effects are shown as actions are made. 

26 • Sketcher can undo step(s) just made, or clear the area and start over. 

27 12. Sketcher 130 can draw lines and shapes of various line width, color, and other attributes, and 

28 further can place icons of various components of real property, such as grassland, flowers, 

29 door, bath tube, fireplace, etc, into the diagram. It is possible to define an area in current 

30 diagram and create an icon on-the-fly from it for applying to other place(s), either kinds of 

31 icons can be transformed (move, resize, rotate, etc) before application. 

32 13. For convenience, it is allowed to do color conversion — change all pixels of color A to color 

33 B, or change a continuous region of pixels of color A to color B. 

34 14. Sketcher can draw picture as well as enter text information for any part of the house. For 

35 example only, the dimensions of a bedroom, the brand name and age of a central air 

36 conditioning unit, or the like can be included. Depending on the Text operation, the text can 

37 be either visually inserted into diagram, or entered through a dialog box and associated as 

38 hidden information which will be shown in a certain area and at a certain time in the final 

39 presentable pages. 

40 15. If Sketcher 130 wants to copy or trace a model diagram such as a blueprint or the like, or 
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; 1 make a comparison with it, Sketcher 130 may enter into a Trace Mode, where the network 

2 address of the model can be entered, and after loading, the model image can be transformed 

; ; 3 (moved, resized, rotated, etc) if necessary. In this mode, two overlaying planes of diagrams 

, 4 are present, the top plane contains any copy or tracing result, and the bottom plane contains 

5 either the model image or the diagram being working on, depending on current operation. 

6 What appears in Sketch Area 26 is the combination of the two planes. Sketcher 130 can trace 

7 over or (partially) copy the model image, then show the traced or copied result over the 

8 working diagram, move to a good position, and do comparison or insertion. To make tracing 

9 easier, it is allowed to show the model in "Contrast Image" mode (i.e. reversed video) to 

10 distinguish it from current diagram, or hide it completely. A few line widths are selectable for 

11 tracing, and a few shapes are selectable for defining copying area. While the Sketcher 130 can 

12 probably determine how to do this using the screen icons and help resources, the present 

13 invention includes a separate online help document to assist users with these function 

14 ,16. The Sketcher 130 can also mark an area in the diagram, in addition to sketching the house 
,15 structure. To do this, Sketcher chooses a area shape in Mark Mode, draws an area in the 

. 16 diagram (which is usually a rectangle, but can be any shape), then picks a picture from Picture 

17 List 14 or enters a name into Picture Name Box 18. This is repeated for as many areas as 

18 desired. The present invention allows the user to have more than one area associated with the 

19 same picture. If the final presentable page 118 has more than one picture box, it is also 

20 allowed to have one area associated to more than one picture. Sketcher 130 can always select 

21 an existing area and change its picture association, or delete the area. 

22 17. After Sketcher 130 thinks that enough have been put into Sketching Area, Sketcher can trigger 

23 the Save control to compose and store the presentation set to the server. During the Save step, 

24 the sketching program may ask for certain file names to use. By default, diagrams will be 

25 named based on their relative positions, such DO, Dl, D2, etc. Usually, one overview (DO) 

26 and three cross-sectional views are considered sufficient to depict a normal residential house: 

27 a High Diagram ("Dl") for the second floor, a Mid Diagram ("D2") for the first floor, and a 

28 Low Diagram ("D3") for the basement. 

29 t 18. Upon completion, Sketcher 130 can close the sketching program. Once the Sketching 

30 * Program 102 is closed, Server 112 will run the Conversion Program 106 to organize the 

31 pictures into Presentable Pages 118 (including, making sure the images are in a format 

32 appropriate for viewing, the necessary interaction and animation code is generated for 

33 navigation, etc), and then run Deploying Program 116 to transmit Presentable Pages 118 to an 

34 appropriate server 112 on the network 100. 

35 19. Sketcher will optionally receive an email message generated by Server 112 notifying Sketcher 

36 130 of the successful completion of the deployment, or of any failure that may have been 

37 encountered. 

38 20. If the Sketcher 130 later wants to do some modification, such as adding or replacing pictures, 

39 1 remapping areas and pictures, correcting errors, etc, the Sketching Program 102 can be 

40 launched again to load the previous presentation package for modification, the newly 



- 29 - 



WO 01/86622 



PCT/US01/15322 



1 generated presentable pages 118 will then overwrite and replace the previous ones stored on 

. ,2 the system. 

• 3 * 

4 A Viewer (or Buyer) 110 or 132 follows the following steps to navigate, online, a house 

5 whose data has been stored on the network. 

6 f 1. Using the Buyer's 110 computer, the Buyer 110 directs its graphics-enabled browser to the 
j * 7 appropriate network address where the presentable pages 118 are located. Links, 

8 advertisements,- directories, etc can be helpful in guiding Viewer to the right houses. 

9 2. When the fiuyer 110 has arrived at the "home page" for a particular house, Viewer 110 will 

10 see information about the house, such as its location, offering price, size, taxes and the like. 

11 Either embedded in this page, or in another page linked to this home page, is Structural 

12 Navigator 108 of the house whose data has been created and deployed. 

13 3. Once the Structural Navigator 108 has been loaded, it initially shows a front image (which can 

14 be a photograph, a sketch, or any representation) of the whole house in Picture Box 200. 

15 Diagram Box 204 may be empty, may contain some instructions for use of the system (Fig. 

16 3), or may show an initial diagram such an overview map of the house and its surroundings. 

17 There is a Height Bar 202 between the house image and Diagram Box 204, and the Viewer 

18 110 is instructed to move the cursor 210 -over the Height Bar 202. When actuated by an input 

19 means, such as by a mouse move in, the different heights marked along Height Bar 202- 

20 trigger the corresponding diagram to be displayed in Diagram Box 204. But when mouse 

, 21 moves out, Diagram Box 204 will switch back to its previous contents. To fix Diagram Box 

22 204 to a diagram in a particular height, Viewer 100 must trigger another "more serious" input 

23 event such as mouse click inside the height marker. Triggering in the background of Height 

24 Bar 202 (out of all the height markers) means to fix to the initial diagram. In general, the 

25 diagram fixed in Diagram Box 204 is said to be the one being focused on. 

26 4. When the presentation is focusing on any particular diagram, Viewer 110 moves cursor 210 

27 into Diagram Box 204. If the cursor 210 is moved into a marked area which has been mapped 

28 to a picture, that picture (probably a downsized version) will be shown in Picture Box 200. 

29 Otherwise, Picture Box 200 will either remain unchanged or show a sign such as "Bed 

30 Room", "Kitchen", etc. As the cursor is moved over the area, the image shown in Picture Box 

31 200 will change. The changing of the image in Picture Box 200 occurs in the absence of any 

32 additional input by Viewer 110, such as in the absence of a signal from an input device such 

33 as a mouse or the like. 

34 5. Viewer 110 can click in the current area in Diagram Box 204. This means to to view further 

35 information, such as a large size or video pictures, a virtual tour, more text descriptions, etc., 

36 and, if the presentation is in a lower mode consisting of smaller amount of material for 

37 quicker download, this request may trigger a mode upgrading and additional presentation 

38 material will be downloaded before continuing navigation. 
39 . Conclusion, Ramifications, and Scope 

40 Thus the present invention can provide users a way to create and view a home presentation in the form 
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1 ■ of structural navigation. The system is deployed in a computer driven network and usable by anyone 

2 from anywhere connecting to the network. The present invention has the additional advantages in that 

3 , 1. It permits Sketcher to make use of diagram resources prepared in the system; 

,4 2. It enforces a standard way for online presentation for all homes presented with this 

5 system. 

6 3. It would greatly save time and cost of house hunting procedure. 

7 4. It would help to increase exposure between buyers and properties thus achieve more fair 

8 deals. 

9 It is to be understood that although the present specification may relate to residential real 

10 estate transactions, this system can be applicable for use in the commercial and industrial real estate 

11 markets. The word House here can mean Apartment, Store, and other real properties 

12 mean rental also. 

^ 13 • 

14 While the above description contains many specificities, these should not be construed as 

15 limitations on the scope of the invention, but rather as an exemplification of one preferred 

16 embodiment thereof. Many other variations are possible. Therefore, although this invention has been 

17 described with a certain degree of particularity, it is to be understood that the present disclosure has 

18 been made only by way of illustration and that numerous changes in the details of construction and 

19 arraignment of elements may be resorted to without departing from the spirit and scope of the 

20 invention. 
21 
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1 CLAIMS. 

2 We Claim: 

3 1 . A method of accessing a plurality of data regarding real property, said data being 

4 associated with each other, said method comprising the steps of: 

5 (a) displaying a first datum of said data; 

6 (b) graphically selecting a location of said first datum, said location being associated to a 

7 second datum of said data; 

8 (c) displaying said second datum; and 

9 (d) designating said second datum as a new first datum of said data; and 
10 (e) repeating steps 1(b) through 1(d), inclusive, as long as desired. 

11 

12 2. The method as described in Claim 1, wherein: 

13 ' said step 1(a) comprises a video display terminal, and 

14 said step 1(b) comprises designating said location by pointing with a computer input 

15 device. 
16 

17 3. The method as described in Claim 2, wherein said step 1(c) further comprises displaying 

18 upon said pointing. 
19 

20 4. The method as described in Claim 3, wherein said data is accessed from a computer 

21 network. 
22 

23 5. The method as described in Claim 3, wherein each of said plurality of data is chosen from 

24 the group consisting of text, a view of said real estate, a photograph, a traced image, a drawn image, or 

25 a schematic view of said real estate. 
26 

27 6. The method as described in Claim 5, wherein said schematic view comprises a floor plan. 
28 

29 7. The method as described in Claim 5, wherein one of said plurality of data comprises a 

30 height bar. 
31 

32 8. A system for accessing a plurality of data regarding real estate, said data being associated 

33 with each other, said system comprising: 

34 (a) storage means to store said plurality of data; 

35 (b) a video display terminal; 

36 (c) first display means to display a first datum of said data on said video display terminal; 

37 (d) an input device capable of pointing to a location on said video display terminal; 

38 (e) detection means for detecting said location upon occurrence of said pointing; 

39 (f) associative means for associating said location with a second datum of said data; and 

. 40 _ (g) second display means for displaying said second datum on said video display terminal 
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1 upon said detection. 

3 9. The system as described in Claim 8, wherein said video display terminal comprises first 

4 ; and second windows, wherein said first datum is displayed in said first window and said second datum 

5 is displayed in said second window. 

" .. ■ 

7 10. The system as described in Claim 9, wherein said detection means does not require any 

8 movement of said input device other than moving said input device to said location. 
9 

10 11. The system as described in Claim 9, wherein said storage means comprises storage on an 

1 1 interconnected computer network. 
12 

13 12. The system as described in Claim 10, wherein each of said plurality of data is chosen 

14 from the group consisting of text, a view of said real estate, a photograph, a traced image, a drawn 

15 image, or a schematic view of said real estate. 

16 ,;' ■ /' 

17 13. The system as described in Claim 12, wherein said schematic view comprises a floor 

18 plan : 
19 

20 14. The method as described in Claim 12, wherein one of said plurality of data comprises a 

21 height bar. 
22 

23 1 5. A method of providing information about real estate through a computer driven network, 

24 said information being a set of images of the real estate and textual information about said real estate, 

25 said method comprising the steps of: 

26 connecting to said network by a viewer using a computer comprising a graphics enabled 

27 network browser; 

28 directing said browser to said information, said information being stored on said network; 

29 transmitting said information to said viewer; 

30 navigating said information, said information further comprising different images and 

31 / different areas from within said different images, said images of said real estate and said textual 

32 information about said real estate being associated with each other; and 

33 ^ storing said information on one of said computers. 

34 , 

35 16. A method of providing information about real property through a computer driven 

36 network, the information being a set of pictures and text of the real property, and associations between 

37 said pictures, text, and areas in said pictures, the method comprising the steps of: 

38 storing said information on one or more computers (called servers) in said network, after a 

39 viewer connecting to said network from a computer with a graphics-enabled network browser, and 
. 40 directing said browser to a network address of said information, said server(s) responding by 
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transmitting said information to said browser, with said browser supporting viewer action of viewing 
pictures and text in said browser, navigating through different pictures and different areas in pictures, 
viewing associated pictures and text while navigating to different points, and requesting further 
information if desired. 

17. The method as described in claim 16, wherein said pictures being chosen from the group 
consisting of photographs, drawn images, and schematic views of said real property, its surroundings, 
and other related objects, wherein said schematic views being chosen from the group consisting of 
maps, floor plans, and structural diagrams. 

18. The method as described in claim 16, wherein said browser being instructed to display 
said information in steps, with the advantage of consuming less screen space, by initially showing part 
of said information in two or more picture boxes, and proceeding to show more by switching contents 
of said picture boxes as navigation going on. 

19. The method as described in claim 16, wherein said navigation, comprising of means of 
changing the picture that is used as a uide and changing the area of focus in said guide, with 
associated pictures being displayed in said picture boxes, and with the possibility of requesting further 
information of said area, being able to carried out in a style chosen from the group consisting of 
automatically by said browser and manually by viewer input device such as by mouse move. 

20. The method as described in claim 19, wherein said means of changing the picture that is 
used as a guide, being chosen from the group consisting of automatically following certain order by 
said browser, manually by viewer triggering said focused area (such as by a mouse click or the like), 
and manually by viewer triggering of certain controls or links shown in said browser, wherein said 
controls or links being chosen from the group consisting of hyperlinks supported in said browser, 
Back/Forword/Go or the like navigation buttons in said browser, and a height bar with height markers, 
wherein said height bar, being an additional picture box showing a background area and zero or more 
height marker areas, with said background area indicating the display of an overview map in a picture 
box and a height marker, being placed according to relative height or proportional height of a floor 
plan, indicating the display of the corresponding floor plan. 

21. A method of creating an information through a computer driven network, the method 
comprising the steps of: 

connecting to said network from a computer with an applet-enabled browser, after entering 
certain information on a real property into appropriate destination, directing said browser to the 
address of a sketching applet, wherein said applet being a means in form of a computer program being 
stored in computers (servers) in the network, and being able to be started from any connected 
computers under certain security convention, with such starting possibly incurring an implicit 
downloading stage but skipping the installation procedure as required by regular computer software, 
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Uploading pictures to server(s); 

Using said applet to manipulate picture entries in the set: create new, insert from outside, and 
remove existing ones; 

Using said applet to draw/sketch pictures; 
Using said applet to insert and modify text in the set; 

Using said applet to insert and modify and real property components (icons) in pictures; 
Using said applet to define areas in the pictures, and associate areas with pictures and text; 
Using said applet to transmit (Save) data into server(s) for them to work together to compose, 
convert and store said data in a form that is usable by the method described in claim 1. 

11 22. The method as described in claim 21, wherein said applet comprising of Cross Sectioner, 

12 component icon. 

: , 13 . ■ ; , , ■ , : . / . 

14 23. The method as described in claim 22, wherein said applet further including capability to 

15 import, copy, partial copy, and trace an existing pictures from user specifiable locations in the 

16 network. 

.;;/i7':'- ; - ' • ' .'. ' 

' ' 18 , " 
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